<template>
  <div id="employmentTraining" class="person-detail">
    <div>
      <van-nav-bar title="就业培训" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div>
      <van-cell title="技能培训" value="更多" to="/work/employmentTraining/skillsTraining" />
    </div>
    <div class="skillsTraining-body">
      <van-grid :gutter="10" :column-num="1">
        <van-grid-item v-for="(ite, index) in publicServiceList" :key="index" @click.native="integralClick(ite)">
          <!-- <van-image width="247" height="200" :src="ite.imgUrl" /> -->
          <!-- <videoPlayer :videoUrl ="ite.videoUrl" style="width:300px;height:170px;"></videoPlayer> -->
          <video-player class="video-player-box video" ref="videoPlayer" :options="ite.playerOptions"
            :playsinline="true" style="width:150px;height:120px;">
          </video-player>

          <div class="employmentTraining-training-de">
            <div class="employmentTraining-training-name">
              <p>{{ ite.subject }}</p>
              <p>{{ ite.description }}</p>
            </div>
            <div class="employmentTraining-training-count">
              <van-icon v-if="ite.viewCount == 0" name="good-job-o" size="16px" />
              <van-icon v-if="ite.count > 0" name="good-job-o" size="16px" color="red" />
              <span>{{ ite.viewCount }}</span>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <div>
      <van-cell title="求职招聘" value="更多" to="/work/employmentTraining/jobRecruitment" />
    </div>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh1">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-for="item in jobs" :key="item.id" class="employmentTraining-training-job" @click="goDetails(item)">
          <p>
            <span class="employmentTraining-training-jobName">{{
          item.subject
        }}</span>
            <span class="employmentTraining-training-salary">{{
          item.salary
        }}</span>
          </p>
          <p class="employmentTraining-training-company">
            {{ item.companyName }}
          </p>
          <p class="employmentTraining-training-address">
            <span>{{ item.address }}</span>
            <span>{{ item.experienceNeedName }}</span>
            <span>{{ item.degreeNeedName }}</span>
          </p>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  import constant from "@/controller/constant.js";
  export default {
    name: "feedBack",
    components: {},
    data() {
      return {
        loading: false,
        finished: false,
        isLoading: false,
        count1: 1,
        publicServiceList: [],
        jobs: [],
        playerOptions: []
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getInfo()
    },
    methods: {
      onLoad() {
        this.getJobInfo();
      },
      onRefresh1() {
        this.jobs = []
        this.count1 = 1;
        this.getJobInfo();
      },
      goDetails(val) {
        this.$router.push({
          path: "/work/employmentTraining/jobDetails",
          query: {
            id: val.id
          }
        });
      },
      getJobInfo() {
        let data = {
          curPage: this.count1,
          pageSize: (this.count1) * 4
        };
        mine.training_position_page(data).then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.jobs = [...this.jobs, ...res.datas.records];
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (res.datas.records.length < (this.count1) * 4) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
      },
      getInfo() {
        let data = {
          curPage: 0,
          pageSize: 4
        };
        mine.training_course_page(data).then(res => {
          this.isLoading = false;
          if (res.code == "0") {
            if (res.datas != null) {
              this.publicServiceList = res.datas.records
              this.publicServiceList.forEach((element, index) => {
                let arr = {
                  autoplay: true, //如果true,浏览器准备好时开始回放。
                  muted: true, // 默认情况下将会消除任何音频。
                  loop: true, // 导致视频一结束就重新开始。
                  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                  language: 'zh-CN',
                  aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                  sources: [{
                    type: "video/mp4",
                    src: element.videoUrl
                  }],
                  //poster: "poster.jpg", //你的封面地址
                  width: document.documentElement.clientWidth,
                }
                this.publicServiceList[index]["playerOptions"] = arr

              });

            }
          } else {
            this.$toast(res.msg);
          }
        })
      },
      back() {
        this.$router.go(-1);
      },
      integralClick(val) {
        this.$router.push({
          path: "/work/employmentTraining/skillTrainingDetails",
          query: {
            id: val.id
          }
        });
      }
    }
  };
</script>
<style lang="scss">
  #employmentTraining {
    background: #fff;

    .skillsTraining-body {
      padding: 10px 0;
    }

    .employmentTraining-training {
      display: flex;
      margin: 10px 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }

    .employmentTraining-training-details {
      width: 50%;
      border: 1px solid #ccc;
      margin: 5px;
      padding: 2px 5px;
      border-radius: 5px;
    }

    .employmentTraining-training-de {
      margin-top: 5px;
      padding-left: 20px;
    }

    .employmentTraining-training-name {
      font-size: 14px;

      >p:nth-child(1) {
        font-weight: bold;
      }

      >p:nth-child(2) {
        font-weight: 300;
        margin-top: 10px;
      }
    }

    .employmentTraining-training-count {
      margin-top: 20px;

      >span {
        margin-left: 5px;
        font-size: 14px;
      }
    }

    p {
      margin: 0;
    }

    /deep/ .van-cell__title {
      font-size: 18px;
      font-weight: 600;
    }

    .van-cell {
      border-bottom: #ccc 1px solid;
    }

    .employmentTraining-training-job {
      padding: 20px;
      border-bottom: 2px solid #ccc;

      >p {
        height: 30px;
        line-height: 30px;
      }
    }

    .employmentTraining-training-jobName {
      font-size: 16px;
      font-weight: bold;
    }

    .employmentTraining-training-salary {
      float: right;
      font-size: 14px;
      color: #dc4630;
    }

    .employmentTraining-training-address {
      >span {
        background: #ccc;
        margin-left: 10px;
        padding: 3px;
        border-radius: 3px;
      }

      >span:nth-child(1) {
        margin-left: 0;
      }
    }

    .van-grid-item__content {
      flex-direction: row;
      align-items: end;
      justify-content: end;
      padding: 5px 10px;
    }

    .video-js .vjs-big-play-button {
      width: 2em;
    }

    /deep/ .van-nav-bar--fixed {
      z-index: 2 !important;
    }
  }
</style>